@ layout("/layout.html"){
<div class="container border">
    <div class="grid">
        <div class="row">
            <div class="span4 bg-dark padding15">
                <div class="icon" style="height: 60px;width: 60px;float:left;margin-left:8px;margin-top:5px"><img src="${base}/img/block2.png"></div>
                <div style="width:160px;height:50px;margin-left:90px;margin-top:10px;text-align:center"><h2 class="fg-white" style="padding-top:8px;">${topic.content!}</h2></div>
            </div>
        </div>
    </div>
    @var i=1;
    @ for(post in postPage.list!){
    @if((i%2)!=0){
    <div class="grid">
        <div class="row padding20" style="padding-top:40px;padding-left:40px;padding-right:40px">
            <div class="tile double bg-dark" data-click="transform">
                <div class="icon margin20 place-left" style="height: 75px;width: 75px"><img src="${post.user.headImg!}"></div>
                <div class="place-right text-center" style="width:100px;height:70px;margin-top:20px;margin-right:20px">
                    <div class="fg-white" style="margin-top:10px">${post.user.username!}</div>
                    <h2 class="fg-white text-bold margin15">${ ((postPage.pageNumber - 1) * postPage.pageSize) + post_index + 1 }</h2>
                </div>
            </div>
            <div class="notice marker-on-left place-right bg-cyan" style="width: 750px;min-height: 100px;margin-right: 30px">
                <div class="padding20" style="margin-left:10px">${post.content}</div>
            </div>

        </div>
    </div>

    @}else{

    <div class="grid">
        <div class="row padding20" style="padding-top:40px;padding-left:40px">

            <div class="notice marker-on-right place-left bg-cyan" style="width: 750px;min-height: 100px;margin-right:10px">
                <div class="padding20" style="margin-left:10px">${post.content}</div>
            </div>

            <div class="tile double bg-dark" data-click="transform" style="margin-left:30px">
                <div class="place-left margin10 text-center"
                     style="width:100px;height:70px;margin-top:11px;margin-left:24px">
                    <div class="fg-white" style="margin-top:20px">${post.user.username!}</div>
                    <h2 class="fg-white text-bold margin15">${ ((postPage.pageNumber - 1) * postPage.pageSize) + post_index + 1 }</h2>
                </div>
                <div class="icon margin20 place-right" style="height: 75px;width: 75px"><img src="{post.user.headImg!}"></div>
            </div>

        </div>
    </div>
    @ }
    @i=i+1;
    @ }

    <div  style="width: 30%;margin-left: 40%">
        @ include("/paginate.html", {"currentPage":postPage.pageNumber,"totalPage":postPage.totalPage,"actionUrl":"/post/" + topic.id! + "-"}) {}
    </div>


    <form action="${base}/post/save" method="post">
    <div style="padding-left:20%">
        @ include("/editer.html", {"textarea_name" : "post.content"}){}
    </div>

    <input type="hidden" name="post.topicID" value="${topic.id!}"/>

    <div class="margin20" style="padding-left:42%">
        <input type="submit" value="回复" class="button large info">
    </div>

    @ if(session.user == null){
    <span><a href="${base}/user/login">登录</a>之后才可以回复哦：）</span>
    @}
    </form>
</div>

@}

